<template>
	<view class="page commodity-list">
		<tab-row class="commodity-list-tab-row" :menus="menus" @change="onChangeMenuItem"></tab-row>
		<page-list class="commodity-list-list-box" :api="commodity.getPageListAsync" :searchParams="searchParams">
			<template #item="{item}">
				<view class="item" @click.stop="onTapItem(item)">
					<view class="item-name">{{ item.name }}</view>
				</view>
			</template>
		</page-list>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { commodity } from '@/mock/commodity';
	const searchParams = ref({
		menuName: '全部',
	});
	const menus = ref(["全部", "待付款", "待收货", "已完成", "已取消"]);

	const onChangeMenuItem = (index : number) => {
		searchParams.value.menuName = menus.value[index];
	}
	const onTapItem = (item : any) => {
		uni.showModal({
			title: '点击',
			content: item.name,
			success: (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: '/order/pages/commodity/detail/commodity-detail?id=' + item.id
					})
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	.commodity-list {
		position: relative;

		&-tab-row {
			position: sticky;
			left: 0;
			top: 0;
		}

		&-list-box {
			// height: calc(100vh - 46px);
			// overflow-y:scroll;
			// box-sizing: border-box;
			padding: var(--page-padding);
		}
	}

	.item {
		margin-top: var(--page-padding);
		background-color: white;
		border-radius: var(--border-radius);
		line-height: 2.5;
		text-align: center;

		// &:last-child{
		// 	margin-bottom:var(--page-padding);
		// }
		&:active {
			background-color: var(--primary-color);
			color: #ffffff;
		}

		&-name {
			font-size: 14px;
			line-height: 2.5;
		}
	}
</style>